<script setup>
import { ref } from "vue";
const style1 = "part1";
const style2 = ref("part2");
const style3 = "part3";

function change1() {
  style1 = "part2";
}
function change2() {
  style1 = "part1";
}
</script>
<template>
  <div v-bind:class="style1"></div>
  <div v-bind:class="style2"></div>
  <div v-bind:class="style3"></div>
  <p @mousemove="change1" @mouseout="change2">放我身上变色</p>
</template>
<style>
div {
  border: 1px solid black;
  width: 50px;
  height: 50px;
  margin: 5px;
}
.part1 {
  background-color: red;
}
.part2 {
  background-color: blue;
}
.part3 {
  background-color: black;
}
</style>
